<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios获取后端的所有员工信息</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getEmpList()">请求所有的员工信息</button>
        <div>
            <table>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>职位</td>
                    <td>领导</td>
                    <td>入职日期</td>
                    <td>工资</td>
                    <td>奖金</td>
                    <td>所属部门</td>
                </tr>
                <tr v-for="emp in emps">
                    <td>{{emp.empno}}</td>
                    <td>{{emp.ename}}</td>
                    <td>{{emp.job}}</td>
                    <td>{{emp.mgr}}</td>
                    <td>{{emp.hiredate}}</td>
                    <td>{{emp.sal}}</td>
                    <td>{{emp.comm}}</td>
                    <td>{{emp.dept.dname}}</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            url:"http://127.0.0.1:8080/emps",
            emps:[]
        },
        mounted() {
            //在页面加载的时候会触发mouted钩子函数
            axios.interceptors.request.use(function(config){
                console.log("*******请求之前触发********");
                config.headers['token']="12333333";
                console.log("***************************");
                return config;
            },function(err){
                return Promise.reject(err);
            });
            //在相应之前
            axios.interceptors.response.use(function(config){
                console.log("*******响应之前触发********");
                console.log(config.data.data.token);
                console.log("***************************");
                return config;
            },function(err){
                return Promise.reject(err);
            });
        },
        methods: {
            //获取所有的员工信息的函数
            getEmpList(){
                axios.get(this.url).then(res=>{
                    this.emps=res.data.data.emps;
                }).catch(err=>{
                    Promise.reject();
                });
            }
        },
    });
</script>